﻿@using Personalblog.Model.Entitys
@model List<Post>
@inject IConfiguration Configuration


<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="3000">
    <div class="carousel-indicators" style="bottom: 10px;">
        @foreach (var item in Model.Select((value, index) => new { Value = value, Index = index }))
        {
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="@item.Index" class="@if (item.Index == 0) { <text>active</text> }" aria-label="Slide @item.Index + 1"></button>
        }
    </div>
    <div class="carousel-inner">
        @foreach (var item in Model.Select((value, index) => new { Value = value, Index = index }))
        {
            <div class="carousel-item @if (item.Index == 0) { <text>active</text> }">
                <div class="row rounded mb-4 shadow-sm box border" style="margin-left:3px;margin-right:3px">
                    <div class="col-md-6">
                        <div class="p-4 p-md-5 mb-4 text-black">
                            <div class="display-6 fst-italic">@item.Value.Title</div>
                            <p class="lead my-3">@item.Value.Summary</p>
                            <p class="lead mb-0">
                                <a class="text-black fw-bold" asp-controller="Blog" asp-action="Post" asp-route-id="@item.Value.Id">
                                    Continue reading...
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6" style="padding-right:0">
                       @if (Configuration.GetSection("Qiliu").GetValue<string>("StarandOff") == "Star")
                       {
                           // 调用GetRandomImageTopQiliu方法获取图片路径
                           <div class="loading" v-if="isLoadingArray">
                               <div class="loading-spinner"></div>
                           </div>
                           <img id="random-image-@item.Index" class="bd-placeholder-img img-fluid no-padding rounded" style="object-fit: cover; object-position: center;width:100%;height:500px" :src="imageSrcArray.data[@item.Index]" alt="" v-if="!isLoadingArray"/>
                       }
                       else
                       {
                           <img class="bd-placeholder-img img-fluid no-padding rounded" style="object-fit: cover; object-position: center;width:100%;height:500px"
                                src="@Url.Action("GetRandomImageTop", "PicLib", new { seed = item.Value.Id })" alt=""/>
                       }
                    </div>
                </div>
            </div>
        }
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev" style="width:5%">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next" style="width:5%">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
